<template>
  <div class="dashboard-editor-container">
    <panel-group @handleSetLineChartData="handleSetLineChartData" />
    <Table
      :table-data="tableData"
      :row-header="rowHeader"
      :height="'81%'"
      :tabHeight="'94%'"
      :page-obj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(0, 0, 0, 0...1)"
    />
  </div>
</template>

<script>
import PanelGroup from "./PanelGroup";
import Table from "@/components/Table/baseTable";
import { AllTask } from "@/api/task.js";

export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup,
    Table,
  },
  data() {
    return {
      tableData: [],
      rowHeader: [
        {
          label: "排序",
          width: "25px",
          prop: "title",
          render: (params, index) => {
            return (
              index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.size
            );
          },
        },
        {
          prop: "projectName",
          label: "项目",
        },
        {
          prop: "taskResponsible",
          label: "负责人",
        },
        {
          prop: "taskTypeName",
          label: "类型",
        },
        {
          prop: "taskStateName",
          label: "状态",
        },
        {
          prop: "startTime",
          label: "创建时间",
        },
        {
          prop: "endTime",
          label: "计划时间",
        },
      ],
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },
    };
  },
  mounted() {
    this.allTask();
  },
  methods: {
    handleSetLineChartData() {},
    handleCurrentChange(val) {
      this.pageObj.currentPage = val;
      this.allTask();
    },
    handleSizeChange(val) {
      this.pageObj.currentPage = 1;
      this.pageObj.size = val;
      this.allTask();
    },
    allTask() {
      AllTask({
        page: this.pageObj.currentPage,
        limit: this.pageObj.size,
      }).then((res) => {
        if (res.code == "200") {
          this.tableData = res.result.records;
          this.pageObj.total = res.result.total;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  width: 100%;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
